<template>
	<view>
		<view class="top_shops u-flex">
			<image src="https://shengtan.hwhsh.com/public/uploads/shop/_231817aa65f2003d2ca0e52c6e80e17a.png"></image>
			<view class="shopname">
				<view class="n1">老嫂子蛋糕店（杭州富阳店）</view>
				<view class="n2 u-flex">
					<view><u-rate inactive-icon="star-fill" active-icon="star-fill" active-color="#FFA51E"
							inactive-color="#d8d8d8" size="28" :count="count" v-model="value"></u-rate><text
							style="color: #FFA51E;">5.0</text></view>
					<span>（173条）</span>
				</view>
				<view class="sjzz u-flex" @click="guize_tc_titleShow = true">商家资质<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
			</view>
		</view>
		<view class="info_address u-flex">
			<view class="info_address_left">
				<view class="left_2 u-flex"><u-icon name="map" color="#666666" size="30"></u-icon><span class="text-Omit">杭州市富阳区巨利路28号</span></view>
				<view class="junin">距离您>10km</view>
			</view>
			<view class="info_address_right u-flex">
				<view class="right_1" @click="Daohang()">
					<image :src="BestImgUrl+'/PackageDetails/Group 34759.png'"></image>
					<view>导航</view>
				</view>
				<view class="right_1" @click="Tel()">
					<image :src="BestImgUrl+'/PackageDetails/Group 34758.png'"></image>
					<view>电话</view>
				</view>
			</view>
		</view>
		
		<view class="shangp_list">
			<view class="tidou">本店捡漏活动</view>
			<view class="shop_list_wrap">
				<view class="shops_box_item u-flex" v-for="(goods,index) in 2" :key="index" @click="OpenDetails(goods,index)">
					<view class="left_goods">
						<image class="goods_tu" src="https://shengtan.hwhsh.com/public/uploads/shop/_231817aa65f2003d2ca0e52c6e80e17a.png"></image>
					</view>
					<view class="right_goods_info">
						<view class="shop_name">9.9蛋糕捡漏</view>
						<view class="tags_box u-flex">
							<u-tag :text="'已售100+份'" mode="light" size="mini" color="#FF5168" bg-color="#FFEEF1" border-color="#FF5168" />
							<text class="mi">3.5km</text>
						</view>
						
						<view class="qiang_Btn u-flex">
							<view class="price">
								<text>¥</text>
								<text>9.9</text>
								<text>商品原价¥50</text>
							</view>
							<view class="qbtn">
								<view class="btn_bg_color">
									<image class="qiangzi" :src="BestImgUrl+'/MangHe/Group 34987.png'" mode=""></image>
									<view class="ljqg">
										<view>立即抢购</view>
										<view>剩余3份</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>

		<view class="pingjia_wrap">
			<view class="tabs_box">
				<view>用户评价(173)</view><span>查看全部<u-icon name="arrow-right" color="#FF4E0D" size="24"></u-icon></span>
			</view>
			
			<view class="biaoqianKA">
				<!-- isSingleSel:是否设置单选(默认false多选) colors:设置颜色  remarkList：标签数组 @tagClick：标签点击 -->
				<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="remarkList" @tagClick="tagsClick"></cc-multipleBtn>
			</view>
			
			<uni-evaluate :list-data="evaluateList" :rate="200" @lookPingJia="lookPingJia" />
		</view>


		<u-popup v-model="guize_tc_titleShow" mode="center" width="524" border-radius="40" :mask-close-able="false" :closeable="false">
			<view class="tc_wrap tc_wrap_gz">
				<view class="tc_info_guize">
					<view class="gz_title">商家资质</view>
					<view class="gz_info">
						<text>本店所售捡漏商品，保证品质完好，请放心购买!</text>
					</view>
				</view>
				<view class="yyzz">
					<image src="/static/images/Frame33412.png"></image>
				</view>
				<view class="tc_btn_box">
					<view class="lijipay">
						<u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="guize_tc_titleShow = false">我知道了</u-button>
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	const app = getApp();
	//数据评价模拟
	import evaluateData from '@/components/xiujun-evaluate/list.js';
	import uniEvaluate from '@/components/xiujun-evaluate/uni-evaluate.vue';
	export default {
		components: {
			uniEvaluate
		},
		data() {
			return {
				guize_tc_titleShow: false,
				BestImgUrl: app.globalData.imgurl,
				count: 5,
				value: 2,
				evaluateList: evaluateData,
				list: [{
					name: '全部评价(173)'
				}, {
					name: '当前捡漏评价(43)'
				}],
				current: 0,
				
				colors: '#FF4E0D',
				remarkList: [{
					name: '食物口味赞'
				}, {
					name: '位置好找'
				}, {
					name: '商家服务好'
				}, {
					name: '停车方便'
				}, {
					name: '服务不错'
				}, {
					name: '等餐时间长'
				}, {
					name: '价格优惠低'
				}, {
					name: '其他原因'
				}],
				
			}
		},
		methods: {
			tagsClick(tagArr, arr) {
				// 选中数据有变化 重新赋值（可以兼容小程序）
				this.remarkList = arr;
			
				console.log("选中的标签  = ", JSON.stringify(tagArr));
			
			},
			change(index) {
				this.current = index;
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			lookPingJia() {

			},
			OpenDetails(item,index){
				uni.navigateTo({
					url: '/subpackageC/pages/MH-Details/MH-Details?package_id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}
	.biaoqianKA {
		padding: 20rpx;
	}
	.shop_list_wrap {
		position: relative;
		z-index: 2;
		padding: 0 0;
		.shops_box_item {
			background-color: #f4f4f4;
			padding: 20rpx;
			border-radius: 16rpx;
			align-items: flex-start;
			margin-bottom: 20rpx;
			box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.05);
			.left_goods {
				width: 184rpx;
				height: 184rpx;
				margin: 0 20rpx 0 0;
				.goods_tu {
					width: 184rpx;
					height: 184rpx;
					border-radius: 16rpx;
				}
				.jdt {
					margin-top: 18rpx;
					position: relative;
					align-items: center;
					.jft_box {
						flex: 1;
					}
					.synum {
						margin-left: 10rpx;
						font-size: 18rpx;
						color: #FF4E0D;
					}
				}
			}
			.right_goods_info {
				flex: 1;
				position: relative;
				height: 184rpx;
				.shop_name {
					font-weight: bold;
					color: $zzy-text-color-333333;
					font-size: 32rpx;
					word-break:break-all;
					display:-webkit-box;
					-webkit-line-clamp:1;
					-webkit-box-orient:vertical;
					overflow:hidden;
				}
				.shop_addres {
					align-items: center;
					font-size: 22rpx;
					color: $zzy-text-color-666666;
					margin-bottom: 8rpx;
					image {
						width: 26rpx;
						height: 26rpx;
					}
					.dz {
						flex: 1;
						-webkit-line-clamp: 1;
					}
					.mi {
						
					}
				}
				.tags_box {
					align-items: center;
					margin-top: 10rpx;
					flex: 1;
					justify-content: space-between;
					text {
						font-size: 28rpx;
						color: #999999;
					}
				}
				.qiang_Btn {
					position: absolute;
					align-items: flex-end;
					justify-content: space-between;
					bottom: 0;
					right: 0;
					width: 100%;
					.price {
						flex: 1;
						color: #FF4E0D;
						text:nth-child(1){
							font-size: 28rpx;
						}
						text:nth-child(2){
							font-size: 42rpx;
							margin: 0 4rpx;
							font-weight: bold;
						}
						text:nth-child(3){
							font-size: 28rpx;
							text-decoration: line-through;
						}
					}
					.qbtn {
						position: relative;
						width: 176rpx;
						height: 84rpx;
						border-radius: 24rpx;
						display: flex;
						align-items: center;
						.btn_bg_color {
							width: 176rpx;
							height: 84rpx;
							margin-left: auto;
							position: relative;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							.qiangzi {
								width: 176rpx;
								height: 84rpx;
							}
							.ljqg {
								width: 100%;
								position: absolute;
								top: 50%;
								left: 57%;
								transform: translate(-50%, -50%);
								text-align: center;
								color: #ffffff;
								view:nth-child(1){
									font-size: 28rpx;
									font-weight: bold;
								}
								view:nth-child(2){
									font-size: 20rpx;
								}
							}
						}
					}
				}
			}
		}
		.shops_box_item:last-child {
			margin-bottom: 0;
		}
	}
	
	.shangp_list {
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		margin: 30rpx 0 0 0;
		.tidou {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
		}
	}

	.top_shops {
		align-items: center;
		padding: 24rpx;
		background-image: linear-gradient(to bottom, #ffffff, #ffffff);
		border-radius: 0 0 0 0;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}

		.shopname {
			padding-left: 20rpx;

			.n1 {
				font-weight: bold;
				font-size: 30rpx;
			}

			.n2 {
				font-size: 28rpx;
				color: #999999;
				margin: 15rpx 0;
			}

			.sjzz {
				align-items: center;
				font-size: 28rpx;
				color: #999999;
			}
		}
	}

	.pingjia_wrap {
		background-color: #ffffff;
		margin: 30rpx 0;
		border-radius: 24rpx;
		padding: 14rpx 14rpx;

		.tabs_box {
			font-size: 30rpx;
			font-weight: bold;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			span {
				margin-left: auto;
				font-size: 28rpx;
				color: #FF4E0D;
				font-weight: initial;
			}
		}
	}

	.info_address {
		align-items: center;
		justify-content: space-between;
		border-radius: 0 0 24rpx 24rpx;
		background-color: #ffffff;
		padding: 0 28rpx 28rpx 28rpx;

		.info_address_left {
			flex: 1;

			.left_1 {
				font-weight: bold;
				font-size: 28rpx;
				align-items: center;
				-webkit-line-clamp: 1;
			}

			.left_2 {
				align-items: center;
				margin-top: 12rpx;
				color: $zzy-text-color-666666;
				font-size: 28rpx;

				.text-Omit {
					-webkit-line-clamp: 1;
				}

				.u-icon {
					margin-right: 10rpx;
				}
			}
			.junin {
				font-size: 28rpx;
				color: #FF4E0D;
				margin-top: 10rpx;
			}
		}

		.info_address_right {
			align-items: center;
			justify-content: center;

			.right_1 {
				text-align: center;
				flex: 1;
				margin: 0 0 0 30rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 6rpx;
				}

				color: $zzy-text-color-666666;
				font-size: 22rpx;
			}
		}
	}
	
	.tc_wrap_gz {
		padding: 42rpx !important;
		background-image: linear-gradient(to top, #ffffff, #FFEDE7);
	}
	
	.tc_wrap {
		padding: 30rpx;
		text-align: center;
	
		.guanyu_title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
	
		.wenan {
			color: #999;
			margin-bottom: 20rpx;
		}
	
		.tc_images {
			image {
				width: 300rpx;
				height: 300rpx;
			}
		}
		
		.yyzz {
			image {
				width: 100%;
				height: 500rpx;
			}
		}
		
		.tc_info_guize {
			
			.gz_title {
				font-weight: bold;
				margin-bottom: 24rpx;
				font-size: 36rpx;
			}
			.gz_info {
				font-size: 28rpx;
				margin-bottom: 24rpx;
				color: #333333;
			}
		}
	
		.tc_info {
			view:nth-child(1) {
				font-weight: bold;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
	
			view:nth-child(2) {
				font-size: 28rpx;
				color: #999;
	
				span {
					color: #FF4E0D;
				}
			}
	
			.gif_tu {
				width: 100%;
				height: 524rpx;
				border-radius: 20rpx;
			}
		}
	
		.tc_btn_box {
			display: flex;
			align-items: center;
			margin-top: 36rpx;
			justify-content: center;
	
			.tc_btn_huise {
				flex: 1;
				margin-right: 12rpx;
				background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
				border-radius: 200rpx;
				padding: 0 0;
				height: 80rpx !important;
				line-height: 80rpx !important;
				text-align: center;
				color: #333333;
			}
	
			.tc_btn_huise_err {
				flex: 1;
				background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
				color: #fff;
				border-radius: 200rpx;
				padding: 0 0;
				height: 80rpx !important;
				line-height: 80rpx !important;
				text-align: center;
			}
	
			.lijipay1 {
				flex: 1;
				position: relative;
				width: 288rpx;
				margin: 0 20rpx 0 0;
	
				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
					color: #333;
					border: none !important;
				}
	
				.u-hairline-border:after {
					border: none !important;
				}
			}
	
			.lijipay {
				flex: 1;
				position: relative;
				width: 288rpx;
				margin: 0 auto;
	
				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
					color: #fff;
					border: none !important;
				}
	
				.u-hairline-border:after {
					border: none !important;
				}
			}
		}
	}
</style>